<template>
    <div class="body">
        <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2"  label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="user">
                <el-input v-model="ruleForm2.user" type="text"  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="tel">
                <el-input v-model="ruleForm2.tel"   autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pass">
                <el-input v-model="ruleForm2.pass" type="password"  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass">
                <el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off"></el-input>
            </el-form-item>
            <el-checkbox>阅读并接受<a target="_blank" href="http://passport.baidu.com/static/passpc-account/html/protocal.html">《百度用户协议》</a>及<a target="_blank" href="https://www.baidu.com/duty/yinsiquan.html">《百度隐私权保护声明》</a></el-checkbox>
            <el-button @click="submit">提交</el-button>
        </el-form>
    </div>
</template>

<script>
import { register } from '../../../api/user'
export default {
    data() {
       
            var checkName = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('用户名不能为空'))
                }
                else if (value.match(/\d/)) {
                    callback(new Error('用户名不能有数字'))
                }
                else {
                    callback();
                }
            }
            var checktel = (rule,value,callback) => {
                if (!value) {
                    return callback(new Error('手机号不能为空'))
                }
                 else if (!value.length === 11) {
                     callback(new Error('手机号错误'))
                 }
            
            }
            var validatePass = (rule,value,callback) => {
                if (!value) {
                    return callback(new Error('请输入密码'))
                }
                else {
                    if (this.ruleForm2.checkPass !== '') {
                        this.$refs.ruleForm2.validateField('checkPass');
                    }
                    callback();
                    }
                }
                var validatePass2 = (rule, value, callback) => {
                    if (value === '') {
                    callback(new Error('请再次输入密码'));
                    } else if (value !== this.ruleForm2.pass) {
                    callback(new Error('两次输入密码不一致!'));
                    } else {
                    callback();
                    }
                }
                return {
                    ruleForm2: {
                        user: '',
                        tel: '',
                        pass: '',
                        checkPass: ''
                    },
                    rules2: {
                        user: [
                            {validator: checkName, trigger: 'blur'}
                        ],
                        tel: [
                            {validator: checktel, trigger: 'blur'}
                        ],
                        pass: [
                            {validator: validatePass, trigger: 'blur'}
                        ],
                        checkPass: [
                            {validator: validatePass2, trigger: 'blur'}
                        ]
                    }
                }
            },
            methods: {
                submit() {
                    register({user_name: this.ruleForm2.user, password: this.ruleForm2.pass, phone: this.ruleForm2.tel}).then(res => {
                        const { data } = res
                        this.$message({
                            message: data.msg,
                            type: 'success'
                        });
                        setTimeout(() => {
                            this.$router.push('/login')
                        },1000)
                    })
                }
            }
        }
</script>
<style lang="stylus">
    .el-input__inner
        width: 350px;
        height: 40px;
   .el-checkbox .el-checkbox__label
        font-size: 12px
</style>



<style lang="stylus" scoped>
    .body
        width: 980px;
        height: 500px;
        margin: 0 auto;
        .el-form
            width: 453px;
            margin-top: 40px;
            .el-button
                width: 350px;
                height: 50px;
                margin-top: 20px;
                margin-left: 100px;
                background: #f69;
                &:hover
                    color: #fff;
            .el-checkbox
                font-size: 12px;
                margin-left: 100px;
                a
                    font-size: 12px;
</style>

